import {Link, useNavigate} from 'react-router-dom';
import {useEffect, useState} from 'react';
import {
	Card,
	Breadcrumb,
	Form,
	Button,
	Radio,
	DatePicker,
	Select,
	Table,
	Tag,
	Space,
	Popconfirm,
} from 'antd';
import {EditOutlined, DeleteOutlined} from '@ant-design/icons';
import locale from 'antd/es/date-picker/locale/zh_CN';

import './index.scss';
import img404 from '@/assets/error.png';
import {http} from '@/utils';

const {Option} = Select;
const {RangePicker} = DatePicker;

export default function Article() {
	// 使用路由跳转对象
	const navigate = useNavigate();
	// 获取频道列表
	const [channels, setChannels] = useState([]);
	// 列表数据
	const [articleList, setArticleList] = useState({
		list: [],
		count: 0,
	});
	// 搜索参数
	const [params, setParams] = useState({
		page: 1,
		per_page: 5,
	});

	// 组件载在完成后获取频道数据
	useEffect(() => {
		http.get('/channels').then(res => {
			setChannels(res.data.channels);
		});
	}, []);

	// 获取列表数据
	useEffect(() => {
		http.get('/mp/articles', {params}).then(res => {
			const {results, total_count} = res.data;
			setArticleList({list: results, count: total_count});
		});
	}, [params]);

	// 搜索
	function onSearch(values) {
		const {status, channel_id, date} = values;
		// 格式化表单数据
		const _params = {};
		// 格式化status
		if (status !== 999) {
			_params.status = status;
		}
		if (channel_id) {
			_params.channel_id = channel_id;
		}
		if (date) {
			_params.begin_pubdate = date[0].format('YYYY-MM-DD');
			_params.end_pubdate = date[1].format('YYYY-MM-DD');
		}
		// 修改params参数 触发接口再次发起
		setParams({
			...params,
			..._params,
		});
	}

	// 分页方法
	function pageChange(page) {
		console.log(page);

		setParams({...params, page});
	}

	// 删除
	function delArticle(data) {
		http.delete(`/mp/articles/${data.id}`).then(() => {
			// 更新列表
			setParams({
				page: 1,
				per_page: 10,
			});
		});
	}

	// 跳转修改
	function toUpdateArticle(id) {
		navigate(`/layout/publish?id=${id}`);
	}

	// 表格渲染
	const columns = [
		{
			title: '封面',
			dataIndex: 'cover',
			width: 120,
			render: cover => {
				return <img src={cover.images[0] || img404} width={80} height={60} alt="123" />;
			},
		},
		{
			title: '标题',
			dataIndex: 'title',
			width: 220,
		},
		{
			title: '状态',
			dataIndex: 'status',
			render: data => <Tag color="green">审核通过</Tag>,
		},
		{
			title: '发布时间',
			dataIndex: 'pubdate',
		},
		{
			title: '阅读数',
			dataIndex: 'read_count',
		},
		{
			title: '评论数',
			dataIndex: 'comment_count',
		},
		{
			title: '点赞数',
			dataIndex: 'like_count',
		},
		{
			title: '操作',
			render: data => {
				return (
					<Space size="middle">
						<Button
							type="primary"
							shape="circle"
							icon={<EditOutlined />}
							onClick={() => {
								toUpdateArticle(data.id);
							}}
						/>
						<Popconfirm
							title="确认删除该条文章吗?"
							onConfirm={() => delArticle(data)}
							okText="确认"
							cancelText="取消">
							<Button
								type="primary"
								danger
								shape="circle"
								icon={<DeleteOutlined />}
							/>
						</Popconfirm>
					</Space>
				);
			},
		},
	];

	return (
		<div className='Article'>
			<Card
				title={
					<Breadcrumb separator=">">
						<Breadcrumb.Item>
							<Link to="/">首页</Link>
						</Breadcrumb.Item>
						<Breadcrumb.Item>内容管理</Breadcrumb.Item>
					</Breadcrumb>
				}
				style={{marginBottom: 20}}>
				<Form initialValues={{status: 999}} onFinish={onSearch}>
					<Form.Item label="状态" name="status">
						<Radio.Group>
							<Radio value={999}>全部</Radio>
							<Radio value={0}>草稿</Radio>
							<Radio value={1}>待审核</Radio>
							<Radio value={2}>审核通过</Radio>
							<Radio value={3}>审核失败</Radio>
						</Radio.Group>
					</Form.Item>

					<Form.Item label="频道" name="channel_id">
						<Select placeholder="请选择文章频道" style={{width: 120}}>
							{channels.map(item => (
								<Option key={item.id} value={item.id}>
									{item.name}
								</Option>
							))}
						</Select>
					</Form.Item>

					<Form.Item label="日期" name="date">
						{/* 传入locale属性 控制中文显示*/}
						<RangePicker locale={locale}></RangePicker>
					</Form.Item>

					<Form.Item>
						<Button type="primary" htmlType="submit" style={{marginLeft: 30}}>
							筛选
						</Button>
					</Form.Item>
				</Form>
			</Card>
			<Card title={`根据筛选条件共查询到 ${articleList.count} 条结果：`}>
				<Table
					rowKey="id"
					columns={columns}
					dataSource={articleList.list}
					pagination={{
						position: ['bottomCenter'],
						current: params.page,
						pageSize: params.per_page,
						total: articleList.count,
						showLessItems: true,
						onChange: pageChange,
					}}
				/>
			</Card>
		</div>
	);
}
